<!-- 待办 -->
<template>
  <IonPage>
    <IonContent :style="mainStyle" class="main">
      <p class="top_text" ref="top_text">注意时间哦~</p>
      <!-- 日历 -->
      <div class="calendar_container" ref="calendar_container">
        <VCalendar
          borderless
          expanded
          class="calendar"
          :color="calendarColor"
          :view="calendarView"
          :attributes="calendarDatas"
        />
      </div>
      <!-- 滑动视图 -->
      <div class="scroll" ref="scroll">
        <div class="task" v-for="item in tasks" :key="item.id">
          <div class="block"></div>
          <img
            @click="changeFinshed(item)"
            class="bingo"
            v-if="item.isShowFinishedImg"
            src="../assets/images/bingo.png"
          />
          <img @click="changeFinshed(item)" class="bingo" v-else />
          <div class="all_text">
            <span class="text1">{{ item.content }}</span>
            <span class="text2">{{ item.time }}</span>
          </div>
        </div>
      </div>
      <!-- 底部导航栏 -->
      <div class="bottom_nav" ref="bottom_nav">
        <IonText router-link="/main"
          ><img src="../assets/images/calender2.png"
        /></IonText>
        <IonText router-link="/clock"
          ><img src="../assets/images/clock.png"
        /></IonText>
        <img src="../assets/images/add.png" @click="Additem" />
        <img src="../assets/images/view.png" @click="$router.push('/kanban')" />
        <IonText router-link="/user">
          <img src="../assets/images/people.png" />
        </IonText>
      </div>
    </IonContent>

    <!-- 弹窗 -->
    <div class="alert" v-if="isAlertShow">
      <!-- 弹窗关闭图标 -->
      <img
        class="alert_shutdown"
        src="../assets/images/shutdown.png"
        @click="shutdownBottomAlert"
        alt=""
      />
      <!-- 弹窗输入框 -->
      <div class="alert_input">
        <img class="alert_writing" src="../assets/images/writing.png" />
        <input class="input_text" type="text" v-model="userInputTaskName" />
        <img
          class="input_bingo"
          src="../assets/images/bingo.png"
          @click="addTask"
        />
      </div>
      <!-- 弹窗导航 -->
      <div class="alert_nav">
        <div class="remaind_div" @click="ClickRemind">
          <img src="../assets/images/remaind.png" alt="" /><span
            class="text_remaind"
            >提醒</span
          >
        </div>
        <div class="clock_div">
          <img src="../assets/images/clock.png" alt="" /><span
            class="text_clock"
            >未知</span
          >
        </div>
        <div class="term_div" @click="ClickTerm">
          <img src="../assets/images/term.png" alt="" /><span class="text_term"
            >期限</span
          >
        </div>
      </div>
    </div>
    <!-- 提醒弹窗 -->
    <div class="alert_remaind" v-if="isRemindChanged">
      <span class="remaind_text">提醒设置</span>
      <div class="remaind_time">
        <div class="time_card" v-for="item in remaindtimes" :key="item.id">
          <img
            class="remaind_bingo"
            @click="ChangeBingo(item)"
            v-if="item.isRemainTime"
            src="../assets/images/bingo.png"
          />
          <img class="remaind_bingo" @click="ChangeBingo(item)" v-else />
          <span class="remaind_content">{{ item.content }}</span>
        </div>
      </div>
      <!-- 提醒弹窗底部导航 -->
      <div class="remaind_nav">
        <div class="remaind_cancel" @click="ClickCanCel">
          <span class="cancel">取消</span>
        </div>
        <div class="remaind_sure">
          <span class="sure">确定</span>
        </div>
      </div>
    </div>
    <!-- 期限弹窗 -->
    <div class="alert_term" v-if="isTermChanged">
      <span class="term_text">计划完成期限</span>
      <div class="term_time">
        <div class="term_timecard" v-for="item in termtimes" :key="item.id">
          <img
            class="term_bingo"
            @click="ChangeBingo(item)"
            v-if="item.isRemainTime"
            src="../assets/images/bingo.png"
          />
          <img class="term_bingo" @click="ChangeBingo(item)" v-else />
          <span class="term_content">{{ item.content }}</span>
        </div>
      </div>
      <!-- 期限弹窗底部导航 -->
      <div class="term_nav">
        <div class="term_cancel">
          <div class="cancel_term" @click="ClickTermCanCel">取消</div>
        </div>
        <div class="term_sure">
          <div class="sure_term">确定</div>
        </div>
      </div>
    </div>
  </IonPage>
</template>
<style scoped>
#app {
  display: flex;
  flex-direction: column;
}
.main {
  display: flex;
  flex-direction: column;
}
.top_text {
  text-align: center;
}

.all_container {
  height: 30vh;
}

.calendar_container {
  padding: 0vh 4vw;
}

.scroll {
  /* 超出布局的部分如何显示 */
  overflow: auto;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 任务 */
.task {
  /* height: 7vh; */
  width: 90%;
  border: 0.5vw solid black;
  border-radius: 5vw;
  position: relative;
  margin-top: 3vw;
  background-color: white;
  display: flex;
}

/* 任务装饰物 */
.block {
  height: 100%;
  background-color: rgb(124, 202, 236);
  width: 4.2vw;
  border-top-left-radius: 20vw;
  border-bottom-left-radius: 20vw;
  position: absolute;
  top: 0vh;
}

/* 对号 */
.bingo {
  width: 4vw;
  height: 4vw;
  border: 0.5vw solid black;
  border-radius: 50%;
  margin-left: 10%;
  margin-top: 1vh;
}

.all_text {
  display: flex;
  flex-direction: column;
}

/* 任务名称 */
.text1 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 1vh;
  margin-left: 0%;
}

/* 任务列表时间样式 */
.text2 {
  /* height: 2vh; */
  padding: 0 3vw;
  display: block;
  text-align: center;
  font-size: 3.4vw;
  background-color: #ecf0f1;
  border-radius: 20vw;
  margin-top: 1vw;
  /* margin: 0 auto; */
  display: inline-block;
}

/* 底部导航栏 */

.bottom_nav {
  width: 100%;
  bottom: 0;
  background-color: white;
  /* height: 10vh; */
  display: flex;
  justify-content: space-between;
  /* flex: 1; */
  position: fixed;
}

/* 底部导航栏图片 */
.bottom_nav img {
  width: 10vw;
  height: 10vw;
}

/* 弹窗 */
.alert {
  width: 100vw;
  height: 15vh;
  border: 0.5vw solid black;
  display: flex;
  border-radius: 5vw;
  flex-direction: column;
  align-items: center;
  position: fixed;
  bottom: 30vh;
  background-color: white;
  animation: addTaskEnter 0.5s ease;
}

/* 弹窗关闭 */
.alert_shutdown {
  width: 7vw;
  height: 7vw;
  top: 1vh;
  right: 0;
  position: absolute;
}

/* 弹窗文本 */
.alert_input {
  width: 75vw;
  height: 6vh;
  border: 0.1vw solid black;
  border-radius: 15vw;
  display: flex;
  justify-content: space-evenly;
  margin-top: 3vh;
}

/* 文本图片 */
.alert_writing {
  width: 10vw;
  height: 5vh;
}

/* 文本样式 */
.input_text {
  border: 0;
  outline: none;
  margin-left: 2vw;
}

/* 文本图片 */
.input_bingo {
  width: 6vw;
  height: 3vh;
  margin-top: 1vh;
}

/* 弹窗底部导航 */
.alert_nav {
  width: 70vw;
  display: flex;
  justify-content: space-between;
  margin-top: 1vh;
}

/* 导航图片 */
.alert_nav img {
  width: 7vw;
  height: 3vh;
}

/* 提醒 */
.remaind_div {
  display: flex;
  flex-direction: column;
}

/* 大弹窗底部文本 */
.text_remaind {
  color: gray;
  font-size: 3vw;
}

/* 期限 */
.term_div {
  display: flex;
  flex-direction: column;
}

/* 期限文本 */
.text_term {
  color: gray;
  font-size: 3vw;
}

/* 提醒弹窗 */
.alert_remaind {
  width: 70vw;
  height: 30vh;
  background-color: white;
  border: 0.1vw solid black;
  border-radius: 6vw;
  position: fixed;
  bottom: 30vh;
  margin-left: 10vw;
}

/* 提醒文本 */
.remaind_text {
  margin-left: 3vw;
  font-size: 5vw;
  border-radius: 6vw;
}

/* 提醒时间框 */
.remaind_time {
  margin-left: 5vw;
  margin-top: 1vh;
  width: 45vw;
  height: 20vh;
  background-color: #ecf0f1;
  border-radius: 6vw;
}

/* 提醒更换对号 */
.remaind_bingo {
  width: 3.5vw;
  height: 1.5vh;
  margin-left: 5vw;
  margin-top: 2vh;
  border: 0.1vw solid black;
}

/* 提醒文本 */
.remaind_content {
  margin-left: 4vw;
}

/* 提醒弹窗 */
.remaind_nav {
  display: flex;
}

/* 提醒取消 */
.remaind_cancel {
  width: 20vw;
  height: 4vh;
  border: 0.1vw solid black;
  border-radius: 25vw;
  margin-left: 3vw;
  margin-top: 1vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 提醒确定 */
.remaind_sure {
  width: 20vw;
  height: 4vh;
  background-color: black;
  color: white;
  border: 0.1vw solid black;
  border-radius: 25vw;
  margin-left: 10vw;
  margin-top: 1vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 未知闹钟 */
.clock_div {
  display: flex;
  flex-direction: column;
}

.text_clock {
  color: gray;
  font-size: 3vw;
}

/* 期限弹窗 */
.alert_term {
  width: 70vw;
  height: 30vh;
  background-color: white;
  border: 0.1vw solid black;
  border-radius: 6vw;
  position: fixed;
  bottom: 30vh;
  margin-left: 10vw;
}

/* 期限字体 */
.term_text {
  margin-left: 3vw;
  font-size: 5vw;
}

/* 期限正方形 */
.term_bingo {
  width: 3.5vw;
  height: 1.5vh;
  margin-left: 5vw;
  margin-top: 2vh;
  border: 0.1vw solid black;
}

/* 期限时间 */
.term_content {
  margin-left: 5vw;
  margin-top: 1vh;
  width: 45vw;
  height: 20vh;
  background-color: #ecf0f1;
  border-radius: 6vw;
}

/* 期限导航 */
.term_nav {
  display: flex;
}

/* 期限取消 */
.term_cancel {
  width: 20vw;
  height: 4vh;
  border: 0.1vw solid black;
  border-radius: 25vw;
  margin-left: 3vw;
  margin-top: 1vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 期限确定 */

.term_sure {
  width: 20vw;
  height: 4vh;
  background-color: black;
  color: white;
  border: 0.1vw solid black;
  border-radius: 25vw;
  margin-left: 10vw;
  margin-top: 1vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<script setup lang="ts">
import { IonText, IonPage, IonContent, IonDatetime } from "@ionic/vue";
import { defineConfig } from "cypress";
import {
  tasksInter,
  termtimesInter,
  remaindtimesInter,
  calendarAttributesInter,
  calendarViews,
  CalendarColor,
} from "@/types";
import { nextTick, onMounted, onUpdated, ref, watch } from "vue";
import { top } from "@popperjs/core";

let mainStyle = {
  opacity: 1,
};
// isshowfinished代办是否完成
let tasks = ref([
  {
    id: 1,
    content: "我是待办",
    time: "12:40",
    isShowFinishedImg: false,
  },

  {
    id: 2,
    content: "我是待办",
    time: "12:40",
    isShowFinishedImg: false,
  },
  {
    id: 3,
    content: "我是待办",
    time: "12:40",
    isShowFinishedImg: false,
  },
  {
    id: 4,
    content: "我是待办",
    time: "12:40",
    isShowFinishedImg: false,
  },
  {
    id: 5,
    content: "我是待办",
    time: "12:40",
    isShowFinishedImg: false,
  },
  {
    id: 6,
    content: "我是待办",
    time: "12:40",
    isShowFinishedImg: false,
  },
  {
    id: 6,
    content: "我是待办",
    time: "12:40",
    isShowFinishedImg: false,
  },
  {
    id: 6,
    content: "我是待办",
    time: "12:40",
    isShowFinishedImg: false,
  },
  {
    id: 6,
    content: "我是待办",
    time: "12:40",
    isShowFinishedImg: false,
  },
  {
    id: 6,
    content: "我是待办",
    time: "12:40",
    isShowFinishedImg: false,
  },
  {
    id: 6,
    content: "我是待办",
    time: "12:40",
    isShowFinishedImg: false,
  },
  {
    id: 6,
    content: "我是待办",
    time: "12:40",
    isShowFinishedImg: false,
  },
]);
// 弹窗是否出现
let isAlertShow = ref(false);
// 提醒是否出现
let isRemindChanged = ref(false);
// 期限是否出现
let isTermChanged = ref(false);
// 提醒时间
let remaindtimes = ref<remaindtimesInter[]>([
    {
      id: 1,
      content: "当天 (9:00)",
      isRemainTime: false,
    },
    {
      id: 2,
      content: "提前1天 (9:00)",
      isRemainTime: false,
    },
    {
      id: 3,
      content: "提前3天 (9:00)",
      isRemainTime: false,
    },
    {
      id: 3,
      content: "提前1周 (9:00)",
      isRemainTime: false,
    },
  ]),
  // 期限时间
  termtimes = ref<termtimesInter[]>([
    {
      id: 1,
      content: "当天",
      isRemainTime: false,
    },
    {
      id: 2,
      content: "本周内完成",
      isRemainTime: false,
    },
    {
      id: 3,
      content: "本周工作日内完成",
      isRemainTime: false,
    },
    {
      id: 4,
      content: "本月内完成",
      isRemainTime: false,
    },
  ]);
//   用户输入的代办名称
let userInputTaskName = "";
let webEquipment = "";
let calendarColor: CalendarColor = CalendarColor.Red;
let calendarView = "monthly";
let calendarDatas: calendarAttributesInter[] = [
  {
    // key值
    key: "test",
    // 是否显示高亮
    highlight: true,
    dates: { start: new Date(2024, 4, 15), end: new Date(2024, 5, 19) },
  },
];
// 改变代办完成状态
const changeFinshed = (item: tasksInter) => {
  if (item.isShowFinishedImg) {
    item.isShowFinishedImg = false;
    console.log(item);
  } else {
    console.log(item);
    item.isShowFinishedImg = true;
  }
};
// 显示增加代办的弹窗
const Additem = () => {
  if (isAlertShow.value === false) {
    isAlertShow.value = true;
    mainStyle.opacity = 0.2;
  } else {
    isAlertShow.value = false;
    mainStyle.opacity = 1;
    calendarColor = CalendarColor.Pink;
  }
};
// 弹窗关闭
const shutdownBottomAlert = () => {
  isAlertShow.value = false;
  mainStyle.opacity = 1;
};
const ChangeBingo = (item: remaindtimesInter) => {
  if (item.isRemainTime == true) {
    item.isRemainTime = false;
  } else {
    item.isRemainTime = true;
  }
};
// 提醒弹窗
const ClickRemind = () => {
  isRemindChanged.value = true;
  isAlertShow.value = false;
  mainStyle.opacity = 0.2;
};
// 提醒取消
const ClickCanCel = () => {
  isRemindChanged.value = false;
  mainStyle.opacity = 1;
};
// 点击期限
const ClickTerm = () => {
  isTermChanged.value = true;
  isAlertShow.value = false;
};
// 期限取消
const ClickTermCanCel = () => {
  isTermChanged.value = false;
  mainStyle.opacity = 1;
};
const addTask = () => {
  // 如果用户输入为空，禁止创建代办
  if (userInputTaskName === "") {
    alert("输入不能为空");
  } else {
    // 添加任务
    tasks.value.push({
      id: 1,
      content: userInputTaskName,
      time: "未设置",
      isShowFinishedImg: false,
    } as tasksInter);
    // 将用户的输入置空
    userInputTaskName = "";
    // 弹窗是否显示
    isAlertShow.value = false;
    // 提醒是否出现
    isRemindChanged.value = false;
    // 期限是否出现
    isTermChanged.value = false;
    mainStyle.opacity = 1;
  }
};
const getEquipment = (): string | undefined => {
  webEquipment = navigator.userAgent;
  if (/Android/i.test(webEquipment)) {
  // console.log(webEquipment)
    return "Android";
  } else if (/iphone/i.test(webEquipment)) {
    return "ios";
  } else {
    return undefined;
  }
};
// ref放在函数中立马变成undefined
let top_text: HTMLDivElement = ref().value;
let calendar_container: HTMLDivElement = ref().value;
let scroll: HTMLDivElement = ref().value;
let bottom_nav: HTMLDivElement = ref().value;
let screenHeight: number = ref(window.screen.height).value;

const getWindowHeight = () => {
  screenHeight = window.screen.height;
  return window.screen.height;
};
// 首次创建完该页面时执行的函数
const createdSetScrollHeight = () => {
  // window.onload确保页面所有组件渲染完毕后执行
  window.onload = () => {
    // 获取日历控件
    calendar_container = document.querySelector(
      ".calendar_container"
    ) as HTMLDivElement;
    // 获取日历实际高度
    let topTextHeight = top_text.offsetHeight;
    let calendarContainerHeight = calendar_container.offsetHeight;
    let bottomNavHeight = bottom_nav.offsetHeight;
    scroll.style.height =
      screenHeight -
      calendarContainerHeight -
      bottomNavHeight -
      topTextHeight +
      "px";
    // 滑动区域最大高度等于滑动区域高度，即滑动区域最大高度等于屏幕高度-日历高度-顶部文字高度-底部导航栏高度
    scroll.style.maxHeight =
      screenHeight -
      calendarContainerHeight -
      bottomNavHeight -
      topTextHeight +
      "px";
  };
};
// 改变任务视图的高度
const changeScrollHeight = () => {
  calendar_container = document.querySelector(
    ".calendar_container"
  ) as HTMLDivElement;
  // offsetHeight获取控件高度
  let topTextHeight = top_text.offsetHeight;
  console.log(topTextHeight);
  let calendarContainerHeight = calendar_container.offsetHeight;
  console.log(calendarContainerHeight);
  let bottomNavHeight = bottom_nav.offsetHeight;
  console.log(bottomNavHeight);

  scroll.style.height =
    screenHeight -
    calendarContainerHeight -
    bottomNavHeight -
    topTextHeight +
    "px";
  // 滑动区域最大高度等于滑动区域高度，即滑动区域最大高度等于屏幕高度-日历高度-顶部文字高度-底部导航栏高度
  scroll.style.maxHeight =
    screenHeight -
    calendarContainerHeight -
    bottomNavHeight -
    topTextHeight +
    "px";
};
// 监听器未发挥作用？？？？？

// 页面大小改变之后执行该函数
window.onresize = () => {
  console.log("网页视图发生变化", getWindowHeight());
  getWindowHeight();
  changeScrollHeight();
};
// 在这里执行获取高度的代码
onMounted(() => {
  getEquipment();
  nextTick(() => {
    // 页面首次创建完毕执行该函数适配屏幕
    createdSetScrollHeight();
  });
});
</script>
